<template>
  <div class="max-box">
    <Registration/>
    <MainInfo/>
    <HotPosition/>
    <HotCompany/>
    <CtiyRecruit/>
    <HeaderLogin class="header" v-show="state" ref="Box"/>
    <!-- 回到顶部 -->
    <div class="back-top" v-show="state" ref="arrow" @click="changeState">
      <a href=""></a>
    </div>
  </div>
</template>

<script>
import Registration from './Registration/index.vue' // 快速注册
import MainInfo from './MainInfo/index.vue' // 职位主要信息
import HotPosition from './HotPosition/index.vue'  // 热招职位
import HotCompany from './HotCompany/index.vue' // 热门企业
import CtiyRecruit from './CityRecruit/index.vue' // 城市招聘
import HeaderLogin from './HeaderLogin/index.vue' // 头部登陆
import anime from "animejs"
export default {
  name: "MyHome",
  components:{
    Registration,
    MainInfo,
    HotPosition,
    HotCompany,
    CtiyRecruit,
    HeaderLogin
  },
  data(){
    return{
      state:false
    }
  },
  mounted(){
    window.addEventListener('scroll',this.windowScroll)
  },
  beforeDestroy(){
    window.removeEventListener('scroll',this.windowScroll)
  },
  methods:{
    windowScroll(){
      const t = document.documentElement.scrollTop
      if(t > 500){
        anime({
          targets: [".header"],
          translateY: 200,
          duration: 1000,
        })
        this.state = true
      }else{
        this.state = false
      }
    },
    changeState(){
      document.documentElement.scrollTop = 0
    }
  }
};

</script>

<style lang="less" scoped>
.max-box{
  background: #e5f4f6;
}
.header{
  position: fixed;
  top: -200px;
  z-index: 30;
}
.back-top{
  width: 44px;
  height: 24px;
  padding: 10px 0;
  border-radius: 22px;
  background: #fff;
  // border: 1px solid red;
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 6%);
  position: fixed;
  right: 5%;
  bottom: 10%;
  cursor: pointer;
  &::before{
    content: '';
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 24px;
     background: url("https://img.bosszhipin.com/static/file/2022/9iumhezupm1651820282511.png") -312px
    0 / auto 24px no-repeat;
  }
  &:hover::before{
    color: #00d7c6;
    background-position: -72px 0;
  }
}
</style>
